<template>

  <el-watermark :font="font" :content=Font_1>

    <div class="app">
      <div class="select">

        授权码：{{ RootCode }}


      </div>
      <div class="Table">
        <div style="border-radius: 15px; overflow: hidden; background-color: white;">
        <el-table :data="tableData" style="width: 100%; height: 100%" v-loading="loading">
          <el-table-column fixed prop="userid" label="账号" width="150" align="center" />
          <el-table-column prop="passward" label="用户密码" width="200" align="center" />

          <el-table-column prop="userimg" label="用户头像" width="200" align="center">

            <template #default="scope">

              <el-image style="width: 80px; height: 80px" :src="scope.row.userimg" :zoom-rate="1.2" :max-scale="7"
                :min-scale="0.2" :preview-src-list="[scope.row.userimg]" :initial-index="4" fit="cover"
                preview-teleported />

            </template>

          </el-table-column>

          <el-table-column sortable prop="sex" label="性别" width="150" align="center" />

          <el-table-column prop="root" label="超级管理员" width="200" align="center">

            <template #default="scope">

              <span v-if="scope.row.root == 1">是</span>
              <span v-else>不是</span>

            </template>

          </el-table-column>

          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">

              <el-button link type="primary" size="small"
                @click=" dialogVisible = true, handleClick(scope.row)">编辑</el-button>
              <el-button link type="danger" size="small" @click="open(scope.row)">删除</el-button>
            </template>
          </el-table-column>

          <!-- 这里是给编辑按钮的弹出框 -->
          <el-dialog v-model="dialogVisible" title="编辑" width="500" :before-close="handleClose" append-to-body>

            <el-form style="max-width: 600px" :model="Data_" label-width="auto" class="demo-ruleForm" :size="formSize"
              status-icon>

              <el-form-item label="账号" required>

                {{ Data_.userid }}
              </el-form-item>
              <el-form-item label="用户名" required>
                <el-input v-model="Data_.username" />
              </el-form-item>

              <el-form-item label="密码" required>
                <el-input v-model="Data_.passward" />
              </el-form-item>

              <el-form-item label="性别" required>
                <el-select v-model="Data_.sex" placeholder="请选择..." size="large" style="width: 350px">
                  <el-option v-for="item in SelectAdminData" :key="item.value" :label="item.value"
                    :value="item.value" />
                </el-select>

              </el-form-item>

              <el-form-item label="管理员" required>

                <div style="margin-top: 20px">
                  <el-radio-group v-model="Data_.root" size="small">
                    <el-radio value="0" label="0" @click="Test">普通用户</el-radio>
                    <el-radio value="1" label="1" @click="Test">超级管理员</el-radio>

                  </el-radio-group>
                </div>

              </el-form-item>

              <el-form-item label="用户头像" required>
                <el-upload class="avatar-uploader" :http-request="UpdataDataImg" :show-file-list="false"
                  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" v-loading="imgloading">
                  <img v-if="Data_.userimg" :src="Data_.userimg" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>

            </el-form>


            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="UpdataSubmit(), dialogVisible = false">
                  提交
                </el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 弹出框结束 -->
        </el-table>
        </div>
      </div>
      <!-- 分页状态栏 -->
      <div class="bar">

        <el-pagination v-model:current-page="NowPage" :small="false" :disabled="disabled" :background="true"
          :default-page-size="PageSize" layout="prev, pager, next, jumper" :total="total"
          @current-change="PageNumChange" />

      </div>


      <!-- 这是治疗推荐的弹出框 -->
      <el-dialog v-model="DigLogAdmin" title="治疗建议" width="1000" :before-close="handleClose1">




        <el-form style="max-width: 1300px" :model="Admin_" label-width="auto" class="demo-ruleForm" :size="formSize"
          status-icon v-loading="Admin_loading">
          <el-form-item label="类型:">
            {{ Admin_.kind }}
          </el-form-item>

          <el-form-item label="危害:">
            {{ Admin_.harm }}
          </el-form-item>

          <el-form-item label="治疗措施:">
            {{ Admin_.treat }}
          </el-form-item>







        </el-form>


        <template #footer>
          <div class="dialog-footer">

            <el-button type="primary" @click="DigLogAdmin = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>


    </div>

  </el-watermark>

</template>



<script setup>

import { onMounted, reactive, ref } from "vue";

import { ElMessageBox, ElMessage } from 'element-plus'

import Admin from '../../../js/api/Admin.js';
// import axiosInstance from '../../js/axiosself'

const Test = () => {
  console.info(Data_.root)
}

const tableData = ref('');//表格数据

const total = ref();//数据总条数

const dialogVisible = ref(false);//编辑的对话框

const loading = ref(true);

onMounted(

  () => {
    GetCode();

    Admin.getTable(NowPage.value, PageSize.value).then(res => {
      tableData.value = res.data.data.object;
      total.value = res.data.data.total;
      loading.value = false;
      console.info(tableData.value);

    })

    Font_1.value = "账号:  " + localStorage.getItem("myuserid");


  }
);


// 这里是给编辑框赋值的
const handleClick = (prop) => {
  console.log(prop.root)
  Data_.userid = prop.userid,
    Data_.userimg = prop.userimg,
    Data_.passward = prop.passward,
    Data_.username = prop.username,
    Data_.sex = prop.sex;
  if (prop.root === 1) {

    Data_.root = "1";
  } else {

    Data_.root = "0";
  }


}

const Data_ = reactive(
  {

    userid: '',
    userimg: '',
    passward: '',
    username: '',
    root: 0,
    sex: '',

  }
)

// 弹出框
const handleClose = () => {
  ElMessageBox.confirm('确认放弃编辑?')
    .then(() => {
      dialogVisible.value = false;
    })
    .catch(() => {
      // catch error
    })

}


// 头像

const handleAvatarSuccess = (

) => {
  ElMessage({
    message: '上传成功！',
    type: 'success',
  });
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('必须是jpg格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('最大不能超过 1MB!')
    return false
  }
  return true
}
// 头像结束


// 导航栏操作



const NowPage = ref(1);//现在的页数，默认1

const PageSize = ref(5);//每页的条数

const PageNumChange = (val) => {

  NowPage.value = val;

  loading.value = true;
  Admin.getTable(NowPage.value, PageSize.value).then(res => {
    tableData.value = res.data.data.object;
    loading.value = false;
  })

}


const imgloading = ref(false);
const UpdataDataImg = (params) => {
  imgloading.value = true;
  Admin.Uplodimg(params).then(resp => {
    if (resp.data.code == 1) {

      ElMessage({
        message: '上传成功！',
        type: 'success',
      });

      Data_.userimg = resp.data.data;
      imgloading.value = false;

    }
    else if (resp.data.code == 0) {

      ElMessage.error('本地端未知错误！');
    }
  })

}



const UpdataSubmit = () => {

  Admin.UpdataUser(Data_).then(resp => {

    if (resp.data.code == 1) {

      ElMessage({
        message: '修改成功！',
        type: 'success',
      });


      Admin.getTable(NowPage.value, PageSize.value).then(res => {
        tableData.value = res.data.data.object;
      })



    } else {
      ElMessage.error(resp.data.msg);
    }

  })
}



const open = (prop) => {
  ElMessageBox.confirm(
    '确定要删除么?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      Admin.DelUser(prop.userid).then(resp => {

        if (resp.data.code == 1) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })



          loading.value = true;

          Admin.getTable(NowPage.value, PageSize.value).then(res => {
            tableData.value = res.data.data.object;
            total.value = res.data.data.total;


            loading.value = false;
          })


        } else if (resp.data.code == 0) {

          if (resp.data.msg == "No_Root") {

            ElMessage({
              type: 'info',
              message: "删除需要超级管理员操作！",
            })
          } else {

            ElMessage({
              type: 'info',
              message: resp.data.msg,
            })
          }
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除！',
      })
    })
}
//删除结束

const DigLogAdmin = ref(false);

const Admin_ = reactive(
  {
    kind: '',
    harm: '',
    treat: ''
  }
);

const Admin_loading = ref(false);

const handleClose1 = () => {
  ElMessageBox.confirm('确认关闭?')
    .then(() => {
      DigLogAdmin.value = false;
    })
    .catch(() => {
      // catch error
    })



}


const SelectAdminData = [

  {
    value: '男',

  },
  {
    value: '女',

  },
  {
    value: '保密',

  },

]

const RootCode = ref('')

const GetCode = () => {
  Admin.GetCode().then(resp => {
    RootCode.value = resp.data.data;
  })
}


//水印部分
const font = reactive({
  color: 'rgba(121,187,255,.4)',
  fontSize: 20
})
//水印是用户的id
const Font_1 = ref("userid");



</script>


<style scoped src="./css/common.css">


</style>
